export const code = `<script setup>
    import { code } from './code/case8.js';
    import * as echarts from 'echarts';
    import { onMounted } from 'vue';
    onMounted(() => {
        // 基于准备好的dom，初始化echarts实例
        const dom1 = document.getElementById('line-case-8-1');
        const dom2 = document.getElementById('line-case-8-2');
        const dom3 = document.getElementById('line-case-8-3');
        const myChart1 = echarts.init(dom1, 'dark', { renderer: 'svg' });
        const myChart2 = echarts.init(dom2, 'dark', { renderer: 'svg' });
        const myChart3 = echarts.init(dom3, 'dark', { renderer: 'svg' });

        // 绘制图表
        /**
         * @param {  "middle" | "start" | "end" }step
         */
        function getOption (step) {
            /** @type {echarts.EChartsOption} */
            const option = {
                title: { text: \`阶梯线图 step:$\{step}\`},
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                },
                yAxis: { type: 'value' },
                series: [
                    {
                        name: '衬衫的销量',
                        type: 'line',
                        data: [5, 20, 36, 10, 10, 20],
                        step, // ★★★系列的 step 属性用来表征阶梯线图的连接类型，它共有三种取值：'start'、'middle' 和 'end'
                        label: {
                            show: true,
                            position: 'top',
                        },
                    },
                ],
            };
            return option;
        }
        myChart1.setOption(getOption('start'));
        myChart2.setOption(getOption('middle'));
        myChart3.setOption(getOption('end'));
    });
</script>`;
